import React, { useState } from 'react';
import { useSelector } from 'umi';

// 引入组件
import { Layout } from 'antd';

// 引入自己的menu组件
import Menu from './components/Menu';
import Header from './components/Header';
import Breadcrumb from './components/Breadcrumb';

const { Content, Footer, Sider } = Layout;

const App: React.FC = (props) => {
  // 控制左侧的菜单栏是否收起来
  // const [collapsed, setCollapsed] = useState(false);

  // const fn = () => {
  //   setCollapsed((v) => !v);
  // };

  const collapsed = useSelector((state: any) => state.index.collapsed);

  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 左边 */}
      <Sider collapsed={collapsed}>
        {/* 上面的logo */}
        <div
          style={{
            height: 32,
            margin: 16,
            background: 'rgba(255, 255, 255, 0.2)',
          }}
        />
        <Menu />
      </Sider>

      {/* 右边 */}
      <Layout className="site-layout">
        {/* <Header onOpen={fn} /> */}
        <Header />
        <Content style={{ margin: '0 16px' }}>
          {/* 面包屑 */}
          <Breadcrumb />
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: '#fff',
            }}
          >
            {/* 下一级路由切换的位置 */}
            {props.children}
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©2023 Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

export default App;
